<template>
  <div>
    <div class="dial">
      <div class="times">抽奖次数{{ LuckyClick }}</div>
      <!-- 转盘包裹 -->
      <div class="rotate">
        <!-- 绘制圆点 -->
        <!-- <div :class="'circle circle_' + index" v-for="(item, index) in circleList" :key="index" :style="{ background: index % 2 == 0 ? colorCircleFirst : colorCircleSecond }"></div> -->
        <!-- 转盘图片 -->
        <img class="dish" src="@/assets/images/chinaPost/bg.png" :style="{ transform: rotate_deg, transition: rotate_transition }" />
        <!-- 指针图片 -->
        <img class="pointer" src="@/assets/images/chinaPost/point.png" />
      </div>
    </div>
    <div class="dateBox">
      <el-date-picker v-model="date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="start" :disabled="LuckyClick === 0"> </el-date-picker>
    </div>
    <div class="mask" v-show="isShowModal">
      <div class="content">
        <div class="close" @click="close">+</div>
        <img src="@/assets/images/chinaPost/2土奔奔.jpg" alt="" v-if="result === 1 || result === 8" />
        <img src="@/assets/images/chinaPost/2木聪聪.jpg" alt="" v-if="result === 2 || result === 5" />
        <img src="@/assets/images/chinaPost/2金满满.jpg" alt="" v-if="result === 3 || result === 0" />
        <img src="@/assets/images/chinaPost/2火旺旺.jpg" alt="" v-if="result === 6 || result === 9" />
        <img src="@/assets/images/chinaPost/2水顺顺.jpg" alt="" v-if="result === 4 || result === 7" />
      </div>
    </div>
  </div>
</template>

<script>
var light_timer; //灯光定时器

export default {
  name: "dial",
  layout:"",
  data() {
    return {
      LuckyClick: 30,
      circleList: [], //原点设置
      colorCircleFirst: "#FE4D32", //圆点颜色
      colorCircleSecond: "#fff", //圆点颜色

      cat: 36, //总共10个扇形区域，每个区域约36度
      isAllowClick: true, //是否能够点击
      rotate_deg: 0, //指针旋转的角度
      rotate_transition: "transform 3s ease-in-out", //初始化选中的过度属性控制
      date: "",
      isShowModal: false,
    };
  },
  computed: {
    result() {
      let day = new Date(this.date).getTime() / 100000;
      return day % 10;
    },
  },
  created() {
    this.showCircleList();
  },

  mounted() {
    // let winningIndex = 9
    // var randomDeg = 360 - winningIndex * 36; //当前下标对应的角度    45是总共8个扇形区域，每个区域约45度
    // this.rotate_deg = "rotate(" + randomDeg + "deg)";
  },

  methods: {
    //绘制圆点设置
    showCircleList() {
      let circleList = [];
      for (var i = 0; i < 16; i++) {
        circleList.push(i);
      }
      this.circleList = circleList;
      this.light();
    },

    //闪动效果
    light: function () {
      var that = this;
      clearInterval(light_timer);
      light_timer = setInterval(function () {
        if (that.colorCircleFirst == "#FE4D32") {
          that.colorCircleFirst = "#fff";
          that.colorCircleSecond = "#FE4D32";
        } else {
          that.colorCircleFirst = "#FE4D32";
          that.colorCircleSecond = "#fff";
        }
      }, 300); //设置圆点闪烁的效果
    },

    start() {
      if (this.LuckyClick == 0) {
        this.$message.info("机会已经用完了");
        return;
      }
      this.rotating();
    },

    rotating() {
      if (!this.isAllowClick) return;
      this.isAllowClick = false;
      this.rotate_transition = "transform 3s ease-in-out";
      this.LuckyClick--;
      var rand_circle = 5; //默认多旋转5圈
      //   var winningIndex = Math.floor(Math.random() * 8); //获奖的下标   0-7   没有概率每个平均
      //   var winningIndex = this.set(); //设置了概率的
      var winningIndex = this.result;

      console.log(winningIndex);
      var randomDeg = 360 - winningIndex * 36; //当前下标对应的角度    45是总共8个扇形区域，每个区域约45度

      var deg = rand_circle * 360 + randomDeg; //将要旋转的度数  由于是顺时针的转动方向需要用360度来减
      this.rotate_deg = "rotate(" + deg + "deg)";

      var that = this;
      setTimeout(function () {
        that.isAllowClick = true;
        that.rotate_deg = "rotate(" + 0 + "deg)"; //定时器关闭的时候重置角度
        that.rotate_transition = "";

        if (winningIndex == 0) {
          that.success("金");
        } else if (winningIndex == 1) {
          that.success("土");
        } else if (winningIndex == 2) {
          that.success("木");
        } else if (winningIndex == 3) {
          that.success("金");
        } else if (winningIndex == 4) {
          that.success("水");
        } else if (winningIndex == 5) {
          that.success("木");
        } else if (winningIndex == 6) {
          that.success("火");
        } else if (winningIndex == 7) {
          that.success("水");
        } else if (winningIndex == 8) {
          that.success("土");
        } else if (winningIndex == 9) {
          that.success("火");
        }
      }, 3500);
    },
    success(msg) {
        this.$message({
            type: 'success',
            message:msg,
            during:8000
      })
      this.tip = msg;
      this.isShowModal = true;
    },
    close() {
      this.isShowModal = false;
      this.tip = "";
    },
    //设置概率
    set() {
      var winIndex;
      //方法1
      //   if (Math.floor(Math.random() * 100) < 30) {
      //     console.log("30%的概率,重在参与");
      //     winIndex = 2;
      //   } else if (Math.floor(Math.random() * 100) < 55) {
      //     console.log("25%的概率,5元");
      //     winIndex = 6;
      //   } else if (Math.floor(Math.random() * 100) < 75) {
      //     console.log("20%的概率,10元");
      //     winIndex = 1;
      //   } else if (Math.floor(Math.random() * 100) < 85) {
      //     console.log("10%的概率,20元");
      //     winIndex = 4;
      //   } else if (Math.floor(Math.random() * 100) < 92) {
      //     console.log("7%的概率,30元");
      //     winIndex = 3;
      //   } else if (Math.floor(Math.random() * 100) < 97) {
      //     console.log("5%的概率,50元");
      //     winIndex = 5;
      //   } else if (Math.floor(Math.random() * 100) < 99) {
      //     console.log("2%的概率,100元");
      //     winIndex = 7;
      //   } else if (Math.floor(Math.random() * 100) == 99) {
      //     console.log("1%的概率,IphoneX");
      //     winIndex = 0;
      //   }

      //方法2
      var __rand__ = Math.random();
      if (__rand__ < 0.3) winIndex = 2;
      else if (__rand__ < 0.55) winIndex = 6;
      else if (__rand__ < 0.75) winIndex = 1;
      else if (__rand__ < 0.85) winIndex = 4;
      else if (__rand__ < 0.92) winIndex = 3;
      else if (__rand__ < 0.97) winIndex = 5;
      else if (__rand__ < 0.99) winIndex = 7;
      else if (__rand__ == 0.99) winIndex = 0;

      return winIndex;
    },
  },
};
</script>

<style scoped lang="scss">
.dial {
  border: 1px solid #ccc;
}
.times {
  text-align: center;
  line-height: 80px;
  background: #fff;
}
.rotate {
  width: 610px;
  height: 610px;
  background: #ffbe04;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  .dish {
    width: 550px;
    height: 550px;
  }
  /* 圆点 */
  .circle {
    position: absolute;
    display: block;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    background: black;
    &_0 {
      top: 8px;
      left: 292px;
    }
    &_1 {
      top: 28px;
      left: 405px;
    }
    &_2 {
      top: 86px;
      left: 495px;
    }

    &_3 {
      top: 185px;
      left: 565px;
    }

    &_4 {
      top: 285px;
      right: 10px;
    }

    &_5 {
      bottom: 189px;
      right: 29px;
    }

    &_6 {
      bottom: 96px;
      right: 88px;
    }

    &_7 {
      bottom: 34px;
      right: 176px;
    }

    &_8 {
      bottom: 6px;
      right: 306px;
    }

    &_9 {
      bottom: 28px;
      left: 190px;
    }

    &_10 {
      bottom: 96px;
      left: 88px;
    }

    &_11 {
      bottom: 182px;
      left: 28px;
    }

    &_12 {
      top: 290px;
      left: 10px;
    }

    &_13 {
      top: 190px;
      left: 28px;
    }

    &_14 {
      top: 100px;
      left: 86px;
    }

    &_15 {
      top: 32px;
      left: 176px;
    }
  }
}

.pointer {
  width: 139px;
  height: 203px;
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dateBox {
  padding-top: 80%;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #00000069;
  .content {
    .close {
      transform: rotate(45deg);
      font-size: 36px;
      position: absolute;
      top:0px;
      right: 10px;
      color:#fff;
      border:1px solid #fff;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    height: 400px;
    top: 20%;
    position: absolute;
    width: 90%;
    left: 5%;
  }
}
</style>
